import { Button, DatePicker, Divider, Flex, Form, Input, message, Modal, Pagination, Popconfirm, Select, Space, Steps, Table, type FormProps, type TableProps } from "antd";
import { useEffect, useState } from "react";
import { deleteMany, deleteOne, getquestions } from "../apis/questions/questions";
import Staffs from "../component/staffsComponent/staffs";
import { staffsDel, staffsDelAll, staffsList } from "../apis/staffs/stafss";
function staffs() {
    const [params, setParams] = useState<any>({ page: 1, psize: 10 });
    const [tableData, setTableData] = useState<any[] | undefined>([])
    const [total, setTotal] = useState<number>(0)
    // 批量删除id
    const [ids, setIds] = useState<any[]>([])
    // 子传夫
    // 弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 修改
    const [rowData, setRowData] = useState<any>()
    const cancelHandle = (value: any) => {
        console.log(value);
        
        setIsModalOpen(true)
        setRowData(value)
    }
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const columns: any = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',

        },
        {
            title: '职员类型',
            dataIndex: 'typename',
            key: 'typename',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render: (sex: string) => {
                <div>
                    {sex === '1' ? '男' : '女'}
                </div>

            }

        },
        {
            title: '身份证号',
            dataIndex: 'cardid',
            key: 'cardid',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
        },
        {
            title: '管理小区',
            dataIndex: 'building',
            key: 'building',
            render: (value: any, record: any) => (
                <div>
                    {value.length > 0 ? value.map((item: any) => {
                        return <div>{item.building}</div>
                    }) : '暂无服务'}
                </div>
            )
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 200,
            render: (value: any, record: any) => (
                <Flex gap={10}>
                    <Button type="primary" color="green" onClick={() => cancelHandle(record)}>修改</Button>
                    <Popconfirm
                        title="提示"
                        description="确定要删除此记录吗？"
                        onConfirm={() => confirmDel(record.id)}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button type="primary" color="default" danger>删除</Button>
                    </Popconfirm>
                </Flex>
            )
        }
    ];
    // 删除
    const confirmDel = async (id: number) => {
        let res = await staffsDel(id)
        console.log(res);
        if (res.errCode == 10000) {
            message.success(
                '删除成功',
            );
        } else {
            message.error(

                '删除失败',
            );
        }
        getStaffs()
    }
    // 批量删除
    const delentAll = async () => {
        let res = await staffsDelAll({ ids: ids })
        if (res.errCode == 10000) {
            message.success('删除成功');
        } else {
            message.error('删除失败');
        }
        getStaffs()
    }
    // 获取列表接口
    const getStaffs = async () => {
        let res = await staffsList(params)
        setTableData(res.data.list)
        setTotal(res.data.counts);
    }
    useEffect(() => {
        getStaffs()
    }, [params])
    useEffect(() => {
        getStaffs()
    }, [])
    const onFinish: FormProps<any>['onFinish'] = (values) => {
        setParams({ ...params, ...values, page: 1 })
        getStaffs()
    };
    const onChangeTotal = (page: number, psize: number) => {
        setParams({ ...params, page, psize })
    }
    const rowSelection: TableProps<any>['rowSelection'] = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
            setIds(selectedRowKeys)
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
        <>
            {isModalOpen && <Staffs onCancel={handleCancel} editUserInfo={rowData} getStaffs={getStaffs}></Staffs>}
            <Flex vertical style={{ width: "100%" }}>
                <Form
                    layout="inline"
                    name="basic"
                    onFinish={onFinish}
                >
                    <Form.Item<any>
                        label="投诉标题"
                        name="key"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<any>
                        label="投诉状态"
                        name="state"
                    >
                        <Select
                            showSearch
                            optionFilterProp="label"
                            style={{ width: '180px' }}
                            options={[
                                {
                                    value: 1,
                                    label: '等待处理',
                                },
                                {
                                    value: 2,
                                    label: '正在处理',
                                },
                                {
                                    value: 3,
                                    label: '处理完成',
                                },
                                {
                                    value: 4,
                                    label: '已评价',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label={null} >
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Form>
                <Flex gap={10} style={{ marginTop: '20px' }}>
                    <Button type="primary" onClick={() => setIsModalOpen(true)}>添加</Button>
                    <Popconfirm
                        title="提示"
                        description="确定要删除此记录吗？"
                        onConfirm={() => delentAll()}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button danger type="primary">批量删除</Button>
                    </Popconfirm>

                </Flex>
                <Divider />
                <Table rowKey={'id'} columns={columns} style={{ width: '100%' }} pagination={false} dataSource={tableData} rowSelection={rowSelection} />
                <Flex justify="center" style={{ marginTop: "10px" }}>
                    <Pagination onChange={onChangeTotal} current={params.page} total={total} showTotal={(total) => `共${total}条`} />
                </Flex>
            </Flex>
        </>
    )
}
export default staffs
